<template>
  <!-- 在职人员详情 -->
  <Drawer
    title="详情"
    :visible="InPostPerDetailsVisible"
    :header-color="'#e7ecf8'"
    width="80%"
    :footer-btns="[
      {
        text: '导出',
        type: 'info',
        icon: 'export',
        trigger: 'export',
      },
      {
        text: '打印',
        type: 'info',
        trigger: 'print',
      },
    ]"
    @cancel="cancel"
    @print="print"
    @export="exportBtn"
  >
    <div class="drawer-box">
      <div class="box-title">
        在职人员详情
      </div>
      <div class="box-table">
        <el-table
          v-loading="tableLoading"
          :data="tableData"
          border
          :header-cell-style="{background:'#fafafa',borderColor:'#e7ecf8',color: '#555555'}"
          header-row-class-name="ck-table-header"
          row-class-name="ck-table-row"
          size="small"
          height="100%"
          style="width: 100%"
          show-summary
          :summary-method="getSummaries"
        >
          <el-table-column align="center" type="index" label="序号" width="60" />
          <el-table-column prop="name" label="账套名称" width="100" />
          <el-table-column prop="code" label="核算科室代码" width="120" />
          <el-table-column prop="heName" label="科室名称" width="160" />
          <el-table-column prop="heCode" label="工号" width="120" />
          <el-table-column prop="operateTime" label="姓名" width="100" />
          <el-table-column prop="operateTime" label="总计" width="160" />
          <el-table-column prop="operateTime" label="职务（岗位）工资" width="160" />
          <el-table-column prop="operateTime" label="薪级工资" width="120" />
          <el-table-column prop="operateTime" label="交通费" width="120" />
          <el-table-column prop="operateTime" label="夜班津贴" width="120" />
          <el-table-column prop="operateTime" label="其他津贴补贴" width="120" />
          <el-table-column prop="operateTime" label="失业保险费" width="120" />
          <el-table-column prop="operateTime" label="工伤保险费" width="120" />
          <el-table-column prop="operateTime" label="生育保险费" width="120" />
          <el-table-column prop="operateTime" label="职务（岗位）津贴" width="160" />
        </el-table>
        <div class="pagenation-box">
          <el-pagination
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </Drawer>
</template>
<script>
export default {
  props: {
    // 接收父组件传来的值
    InPostPerDetailsVisible: Boolean
  },
  data() {
    return {
      total: 0,
      pageSize: 20,
      currentPage: 1,
      tableData: [
        {
          code: '3020',
          name: '内二',
          heCode: '549902',
          heName: '骨松门诊',
          operateTime: '0.00'
        },
        {
          code: '3040',
          name: '儿科',
          heCode: '500820',
          heName: '骨松门诊',
          operateTime: '0.00'
        },
        {
          code: '4070',
          name: '高压氧舱',
          heCode: '6011',
          heName: '骨松门诊',
          operateTime: '0.00'
        },
        {
          code: '4080',
          name: '药剂科',
          heCode: '700901',
          heName: '骨松门诊',
          operateTime: '0.00'
        }
      ],
      tableLoading: false
    }
  },
  mounted() {

  },
  methods: {
    // 关闭抽屉
    cancel() {
      this.$emit('perDetails', { InPostPerDetailsVisible: false })
    },
    // 导出
    exportBtn() {
      console.log('导出')
    },
    // 打印
    print() {
      console.log('打印')
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val
      this._getData()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this._getData()
    },
    // 指定列求和
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (column.property !== 'name' && column.property !== 'heName' && column.property !== 'code' && column.property !== 'heCode') {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index]
        }
      })
      return sums
    }

  }
}
</script>
<style lang="less" scoped>
.el-table--mini,
  .el-table--small,
  .el-table__expand-icon {
    font-size: 14px !important;
  }

  .ck-table-header {
    th {
      background: #fafafa !important;
      height: 48px;
      color: #555555 !important;
    }
  }
.pagenation-box {
  display: flex;
  padding-top: 2px;
  justify-content: flex-end;
}
.drawer-box{
  height: 100%;
}
.box-title{
  height: 44px;
  background: #f6f9fe;
  border-bottom: 1px solid #e7ecf8;
  font-size: 16px;
  color: #555555;
  line-height: 44px;
  padding-left: 10px;
  box-sizing: border-box;
}
.box-table{
  padding: 14px 10px 14px 10px;
  height: calc(100% - 78px);
  box-sizing: border-box;
}
</style>
